<template>
	<div class="">

		<div class="zzc" v-if="showzzc" @click="close"></div>

		<div class="container">
			<div class="title">工程师管理</div>

			<div class="search_box">
				<input type="text" autocomplete="off" v-model="word" class="form-control search_inp"
					placeholder="这里输入关键词">
				<div class="select_box">
					<div class="form-control" id="select" @click="options_show=!options_show;showzzc=!showzzc">
						<div :style="typename=='选择小组'?'color: #999;':''">{{typename}} </div>
						<img src="../../assets/images/down.png" alt="">
					</div>
					<div class="options" v-if="options_show">
						<div class="option" style="color: #999;">选择小组</div>
						<div class="option" @click="selectit('all')">全部</div>
						<div class="option" @click="selectit(index)" v-for="item,index in types">{{item.name}}</div>
					</div>
				</div>

				<div class="sea_btn sear_btns" @click="page=1;naes=word;getlist()">
					<img src="@assets/images/search.png" alt="">
					查询
				</div>
				<div class="add_btn sear_btns" @click="openalert('add')" v-if="$permissions.indexOf(77)  != -1">
					<img src="@assets/images/add.png" alt="">
					新增
				</div>
				<div class="del_btn sear_btns" @click="delopen" v-if="$permissions.indexOf(78)  != -1">
					<img src="@assets/images/del.png" alt="">
					删除
				</div>
			</div>
			<div class="table-responsive mt-20">
				<h2 class="tcent" v-if="list.length ==0">暂时没有数据</h2>
				<table class="table table-hover" v-else>
					<tr>
						<th style="width: 50px;" v-if="$permissions.indexOf(78)  != -1">
							<input type="checkbox" @change="changeall" v-model="choseall" name="all" id="a"><label
								for="a"></label>
						</th>
						<!-- <th style="text-align: center;width: 80px;padding-right: 30px;">序号</th> -->
						<th>账号</th>
						<th>姓名</th>
						<th>所属科室</th>
						<th>所属小组</th>
						<th>钉钉</th>
						<th>企业微信</th>
						<th class="tcent" v-if="$permissions.indexOf(78)  != -1">操作</th>
					</tr>

					<tr v-for="item,index in list">
						<td style="width: 50px;" v-if="$permissions.indexOf(78)  != -1">
							<input type="checkbox" v-model="item.chosesf" @change="chosechange" name="chose"
								:id="item.id"><label :for="item.id"></label>
						</td>
						<!-- <td style="text-align: center;width: 80px;padding-right: 30px;">{{item.id}}</td> -->
						<td>{{item.user_name}}</td>
						<td>{{item.real_name}}</td>
						<td>{{item.dept_name}}</td>
						<td :title="item.group_name">{{item.group_name}}</td>
						<td>{{item.dingding?item.dingding:'暂未绑定钉钉'}}</td>
						<td>{{item.wecom?item.wecom:'暂未绑定企业微信'}}</td>

						<td class="tcent" v-if="$permissions.indexOf(78)  != -1">
							<div class="edit" @click="setgroup(index)" style="margin-right: 10px;width: 83px;">设置分组
							</div>
							<div class="del" @click="ids=item.id;delnum=1;delalert=true">删除</div>
						</td>
					</tr>


				</table>

				<div class="page_box">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="page" :page-sizes="[10, 30, 60, 100]" :page-size="limit"
						layout="total, sizes, prev, pager, next, jumper" :total="inglen">
					</el-pagination>
				</div>

			</div>

		</div>

		<!--选择添加工程师-->
		<div :class="alert_show?'modal in fade':'modal fade'" role="dialog"
			:style="alert_show?' align-items: center;justify-content: center;display: flex;z-index:199':''"
			id="engineer">

			<div class="cent w700" style="height: 865px;max-width: 955px;max-height:calc(100vh - 50px)">

				<div class="modal-dialog" role="document">
					<div class="modal-content" style="overflow: visible;">

						<div class="zzc" v-if="showzzc" @click="close" style="top: -145px;left: calc(-50vw + 37%);">
						</div>
						<div class="modal-header tit">
							<em></em>添加工程师
							<div class="right" @click="closealert">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										class="iconfont icon-cha" aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100"
							style="overflow-x: hidden;overflow-y:scroll;height:788px;max-height:calc(100vh - 150px)">
							<div class="left">
								<div class="zTreeDemoBackground">
									<ul id="treeDemo2" class="ztree" @select="choseroom"></ul>
								</div>
							</div>
							<div class="right" style="overflow: visible;">
								<div class="search">
									<!-- <form> -->
									<div class="form-group" style="display: flex;padding-right: 0;">
										<input class="form-control" autocomplete="off"
											@keydown.enter="page2=1;word2s=word2;getenglist()" v-model="word2"
											placeholder="输入关键字">
										<div style="margin-left: 10px;" class="btn btn-success"
											@click="page2=1;word2s=word2;getenglist()">
											<span class="iconfont icon-chaxun"
												style="line-height: 34px;vertical-align: baseline;"></span>
										</div>
									</div>
									<!-- </form> -->
								</div>
								<div class="txt-black">为您找到{{inglen2}}位 <span class="txt-blue">用户</span> </div>

								<div class="enr_alert_scorll">
									<div style="height: 552px;overflow-y: auto;">
										<h2 class="tcent" v-if="englist.length ==0">暂时没有数据</h2>
										<table class="table table-hover smallTab" v-else>
											<tr>
												<th><input type="checkbox" @change="changeall2" v-model="choseall2"
														name="all2" id="a2"><label for="a2"></label></th>
												<th>账号</th>
												<th>姓名</th>
												<th>电话</th>
											</tr>
											<tr v-for="item,index in englist">
												<td>
													<input type="checkbox" v-model="item.chosesf" @change="chosechange2"
														name="chose2" :id="'c'+item.id"><label
														:for="'c'+item.id"></label>
												</td>
												<td>{{item.userName }}</td>
												<td>{{item.realName}}</td>
												<td>{{item.phoneNo}}</td>
											</tr>
										</table>
									</div>
									<div class="Spage" style="margin: 20px 0;">
										<el-pagination @current-change="handleCurrentChange2" :current-page="page2"
											style="display: flex;justify-content: flex-end;" :pager-count="5"
											:page-size="10" layout="prev, pager, next" :total="inglen2">
										</el-pagination>
									</div>

									<div style="display: flex;justify-content: space-between;">
										<div class="form-group form-inline line" style="justify-content: flex-start;">
											<label for="" style="margin-bottom: 0;line-height: 34px;">选择分组</label>
											<div class="select_box">
												<div class="form-control" id="select"
													@click="options_show2=!options_show2;showzzc=!showzzc;">
													<div :style="group=='选择小组'?'color: #999;':''">{{group}} </div>
													<img src="../../assets/images/down.png" alt="">
												</div>
												<div class="options" v-if="options_show2" style="bottom: 34px;">
													<div class="option" style="color: #999;">选择小组</div>
													<!-- <div class="option" @click="selectit2('all')">全部</div> -->
													<div class="option" @click="selectit2(index)"
														v-for="item,index in types">
														{{item.name}}
													</div>
												</div>
											</div>
										</div>

										<div class="tcent">
											<button class="btn btn-primary" @click="showData">确定</button>&emsp;
											<button class="btn btn-default" @click="closealert()">关闭</button>
										</div>
									</div>

								</div>


							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="alzzc" v-if="delalert">
			<div class="del_alert">
				<div class="modal-header tit" style="text-align: left;">
					<em></em>信息
					<div class="right" @click="delalert=false">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"
							style="line-height: normal;"><span class="iconfont icon-cha" aria-hidden="true"></span>
						</button>
					</div>
				</div>
				<div class="alert_info">确认要删除选中的<span>{{delnum}}</span>条数据吗？</div>
				<div class="alert_btns">
					<div class="alert_sure" @click="del">确认</div>
					<div class="alert_close" @click="delalert=false">取消</div>
				</div>
			</div>
		</div>

		<!--设置分组子-->
		<div :class="alert_showsetsys?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="alert_showsetsys?'display: block;z-index:199':''">
			<div class="cent w600"
				style="justify-content: center;width: 544px;height: 230px;margin-top: calc(50vh - 150px);">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>设置分组
							<div class="right" @click="alert_showsetsys=false">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont" style="height: 100px;">
							<div class="line">
								<div class="line_title"> </div>
								<el-checkbox-group v-model="sysId">
									<el-checkbox :label="item.id" v-for="item in types" :value="item.id">{{item.name}}
									</el-checkbox>
								</el-checkbox-group>
								<!-- 	<el-select v-model="sysId">
									<el-option v-for="item in types" :key="item.id" :label="item.name"
										:value="item.id">
									</el-option>
								</el-select> -->
							</div>
						</div>
						<div class="buttons">
							<div class="sure" @click="setit">确定</div>
							<div class="closebtn" @click="alert_showsetsys=false">关闭</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<div class="loading-content" v-if="showloading">
			<div class="loading-spinner">
				<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
				</svg>
			</div>
			<div class="loading-text">加载中...</div>
		</div>
	</div>
</template>

<script type="text/babel">
	import $ from 'jquery'

	export default {
		name: "",
		data() {
			return {
				sysId:[],
				syslist:[],
				alert_showsetsys: false,
				showadd: false,
				showzzc: false,
				alert_show: false,
				delalert: false,
				choseall:false,
				choseall2:false,
				page: 1,
				page2: 1,
				list: [],
				englist: [],
				inglen: 0,
				inglen2: 0,
				delnum: 0,
				limit: 10,
				limit2: 10,
				num: 1,
				num2: 1,
				type:0,
				showloading: false,
				word:"",
				naes:"",
				word2:"",
				word2s:"",
				typeid:'0',
				
				typename : '选择小组',
				group : '选择小组',
				options_show:false,
				options_show2:false,
				count:0,
				bumenid:'',
				setting: {
					treeId: 'id',
					data: {
						key: {
							name: 'name'
						}
					},
					callback: {
						onClick: this.choseroom
					}
				},
				zNodes: [],
				treeClickCount:0,
				ids:"",
			}
		},
		components: {},

		created() {
			
			this.getlist();
			this.getrooms();
			this.gettype();
		},

		mounted() {

		},

		methods: {
			setgroup(i){
				var that = this
				var param = {
					userId:this.list[i].id
				}
				this.$http.post(this.$url + '/sys/user/getGroups', this.$qs.stringify(param))
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							that.sysId = response.data.data
							that.ids = that.list[i].id
							that.alert_showsetsys = true
						})
						.catch(function(error) {
							console.log(error);
						that.$Toast('网络拥堵，刷新一下');
						});
				
			},
			setit(){
				// console.log(this.sysId)
				// return
				// if(this.sysId.length == 0){
				// 	this.$Toast('请选择组');
				// 	return
				// }
				var that = this
				var param = {
					userId:this.ids,
					ids:this.sysId.join(',')
				}
				this.$http.post(this.$url + '/engineer/setUserGroups', this.$qs.stringify(param))
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							that.$Toast(response.data.msg);
							that.alert_showsetsys = false
							that.getlist()
						})
						.catch(function(error) {
							console.log(error);
						that.$Toast('网络拥堵，刷新一下');
						});
			},
			getgroup(){
				// var that = this
				// this.$http.get(this.$url + '/group/select')
				// 	.then(function(response) {
				// 		if (response.data.code == '1410') {
				// 			that.$Toast(response.data.msg);
				// 			sessionStorage.setItem('token', '')
				// 			that.$router.push('/login')
				// 			return
				// 		}
						
				// 		that.syslist = response.data.data.records
				// 	})
				// 	.catch(function(error) {
				// 		console.log(error);
				// 		that.$Toast('网络拥堵，刷新一下');
				// 	});
			},
			handleSizeChange(val) {
			       console.log(`每页 ${val} 条`);
					this.limit = val
					this.choseall = false
					this.getlist()
			},
			handleCurrentChange(val) {
			    console.log(`当前页: ${val}`);
				this.page = val
				this.choseall = false
				this.getlist()
			},
			handleCurrentChange2(val) {
				console.log(`当前页: ${val}`);
				this.page2 = val
				this.choseall2 = false
				this.getenglist()
			},
			closealert(){
				this.choseall2=false
				this.alert_show=false;
				this.showzzc=false;
				this.options_show2=false;
				this.group = '选择小组'
				this.groupid = ''
				this.word2 = ''
				this.word2s = ''
				this.bumenid = ''
				this.ztree_obj.cancelSelectedNode();
				this.getenglist()
			},
			getenglist() {
				this.showloading = true
				this.choseall2 = false
			
				var bumenid= this.bumenid?this.bumenid:''
				
				var that = this
				
				var url = encodeURI(this.$url + '/sys/user/list?page='+this.page2+'&limit='+this.limit2+'&userName='+this.word2s+'&deptId='+bumenid);

				this.$http.get(url)
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.englist = response.data.data.records
						for (var i = 0; i < that.englist.length; i++) {
							that.englist[i].chosesf = false
							that.englist[i].id = window.atob(that.englist[i].id)
						}
					that.inglen2 = response.data.data.total
					that.num2=response.data.data.pages
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
			choseroom(data, node, treeNode) {
				this.treeClickCount++;
				if (this.treeClickCount >= 2) {
					return;
				}
				var that = this
				this.timer = window.setTimeout(() => {
					if (that.treeClickCount == 1) {
						that.treeClickCount = 0;
						console.log('单击事件,可在此处理对应逻辑')
				
						// if(that.bumenid == treeNode.id){
						// 	that.ztree_obj.cancelSelectedNode();
						// 	that.bumenid =''
						// }else{
									that.bumenid = treeNode.id
						// }
						that.page2 = 1
						that.getenglist()
					} else if (that.treeClickCount > 1) {
						that.treeClickCount = 0;
						console.log('双击事件,可在此处理对应逻辑')
					}
				}, 300);
			},
			// 获取科室
			getrooms() {
				var param = {
					parentId: 0
				}
				var that = this
				this.$http.post(this.$url + '/sys/dept/tree', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.zNodes = response.data.data
						that.ztree_obj = $.fn.zTree.init($("#treeDemo2"), that.setting, that.zNodes);
						var  nodes4 = that.ztree_obj.getNodes();
						for  ( var  i = 0; i < nodes4.length; i++) {  //设置节点展开
							that.ztree_obj.expandNode(nodes4[i],  true ,  false ,  true );
						}
						that.page2=1
						that.getenglist();
					})
					.catch(function(error) {
						console.log(error);
						
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
			selectit2(index){
				if(index=='all'){
					this.group = '全部'
					this.groupid = ''
				}else{
					this.group = this.types[index].name
					this.groupid = this.types[index].id
				}
				this.options_show2=false
				this.showzzc=false
			},
			selectit(index){
				if(index=='all'){
					this.typename = '全部'
					this.typeid = ''
				}else{
					this.typename = this.types[index].name
					this.typeid = this.types[index].id
				}
				this.options_show=false
				this.showzzc=false
			},
			
			delopen(){
				var ids=''
				var num = 0
				for (var i = 0; i < this.list.length; i++) {
					if(this.list[i].chosesf==true){
						ids = ids+''+this.list[i].id+','
						num++
					}
				}
				this.ids = ids.substring(0,ids.length-1)
				if(this.ids==''){
					this.$Toast('暂无选中');
					return
				}
				this.delnum = num
				this.delalert=true					
			},
			// 删除
			del(){
				this.delalert=false
				var param = {
					ids:this.ids
				}
				var that = this
				this.$http.post(this.$url + '/engineer/delete', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.page=1
					that.getlist()
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			// 打开弹窗
			openalert(type,index){
				this.type=type
				if(index !=undefined){
					this.id=this.list[index].id
					return
					// this.brief=this.list[index].brief
				}else{
					// this.brief=''
				}
				this.alert_show=true
				
			
			},
			changeall2(){
				if(this.choseall2){
					for (var i = 0; i < this.englist.length; i++) {
						this.englist[i].chosesf = true
					}
				}else{
					for (var i = 0; i < this.englist.length; i++) {
						this.englist[i].chosesf = false
					}
				}
			},
			chosechange2(){
				for (var i = 0; i < this.englist.length; i++) {
					console.log(i)
					if(this.englist[i].chosesf == true){
						this.choseall2=true
					}else{
						this.choseall2=false
						break
					}
					
				}
				this.$forceUpdate()
			},
			changeall(){
				if(this.choseall){
					for (var i = 0; i < this.list.length; i++) {
						this.list[i].chosesf = true
					}
				}else{
					for (var i = 0; i < this.list.length; i++) {
						this.list[i].chosesf = false
					}
				}
			},
			chosechange(){
				for (var i = 0; i < this.list.length; i++) {
					if(this.list[i].chosesf == true){
						this.choseall=true
					}else{
						this.choseall=false
						break
					}
					
				}
			},
			// 表单提交
			showData(e) {
				var id_arr=[]
				for (var i = 0; i < this.englist.length; i++) {
					if(this.englist[i].chosesf==true){
						id_arr.push(
						{
							    "userId":this.englist[i].id,
							    "groupId":this.groupid
						})
					}
				}
				if (id_arr.length <= 0) {
					this.$Toast("请选择工程师");
					return
				}
				
				if (!this.groupid) {
					this.$Toast("请选择小组");
					return
				}
				
				this.showloading = true
				console.log(id_arr)
				var that = this
				this.$http.post(this.$url + '/engineer/save', id_arr, {headers: {'content-type': 'application/json'}})
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.showadd = false
						that.choseall2 = false
						that.group = '选择小组'
						that.groupid = ''
						that.word2 = ''
						that.bumenid = ''
						that.ztree_obj.cancelSelectedNode();
						that.changeall2()
						that.$Toast(response.data.msg);
						that.getlist()
						that.getenglist()
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			// 上一页
			prev() {
				if (this.page2 <= 1) {
					return
				}
				this.page2 = this.page2 - 1;
				this.getenglist()
			},
			// 下一页
			next() {
				if (this.page2 >= this.num2) {
					return
				}
				this.page2 = this.page2 + 1;
				this.getenglist()
			},
			// 点击页码
			gonext(page) {
				if(this.page2==page){
					return
				}
				this.page2 = page
				this.getenglist()
			},
			// 点击遮罩层
			close(){
				this.options_show=false
				this.options_show2=false
				this.showzzc=false
			},
			// 获取分组
			gettype() {
				this.showloading = true
			
				var that = this
				this.$http.get(this.$url + '/engineer/selectGroup')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.types = response.data.data
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
	
			getlist() {
				this.showloading = true
				this.choseall = false

			
				var that = this
				var zuid = this.typeid==0?'':this.typeid
				var url = encodeURI(this.$url + '/engineer/select?page='+this.page+'&limit='+this.limit+'&userName='+this.naes+'&groupId='+zuid)
				this.$http.get(url)
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.list = response.data.data
						for (var i = 0; i < that.list.length; i++) {
							that.list[i].chosesf = false
						}
						that.choseall = false
						that.inglen = response.data.count
						if (that.inglen > that.limit) {
							that.num = Math.ceil(that.inglen / that.limit)
						} else {
							that.num = 1
						}
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						
						that.$Toast('网络拥堵，刷新一下');
					});

			},
		},

		computed: {},
	}
</script>
<style lang='less' scoped>
	.enr_alert_scorll {
		padding-bottom: 0;
	}

	/deep/ .el-pagination__total {
		height: 33px !important;
		line-height: 33px !important;
	}

	/deep/ .el-input--mini .el-input__inner {
		height: 33px;
	}

	/deep/.el-pagination__editor.el-input .el-input__inner {
		height: 33px;
	}

	.page_box {
		display: flex;
		justify-content: flex-end;
		margin-top: 30px;
	}

	/deep/ .el-pagination .btn-prev {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pagination .btn-next {
		border: 1px solid #ccc;
		padding: 0;
		border-left: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pager li {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		line-height: 33px;
	}

	/deep/ .el-pager li:nth-last-of-type(1) {
		border-right: 1px solid #ccc;
	}

	/deep/ .el-pager li.active {
		border: #4286f5 1px solid;
		background: #4286f5;
		color: #fff;
	}

	.modal .cent.w600,
	.modal .cent.w700 {
		height: calc(100% - 100px);
		margin: 50px auto;
	}

	.pages {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}

	.buttons {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 38px;
	}

	.closebtn {
		width: 89px;
		height: 34px;
		background: #EEEEEE;
		border-radius: 6px;
		font-size: 14px;
		color: #434343;
		text-align: center;
		line-height: 34px;
	}

	.sure {
		width: 89px;
		height: 34px;
		line-height: 34px;
		background: #4286F5;
		border-radius: 6px;
		font-size: 14px;
		color: #FFFFFF;
		margin-right: 18px;
		text-align: center;
	}

	.w600 .modal-body.h100 {
		height: 207px;
	}

	.line textarea {
		height: 75px;
	}

	.line input,
	.line select,
	.line textarea {
		width: 360px;
		color: #000;
	}

	.line_title span {
		color: #E65100;
	}

	.line_title {
		font-size: 14px;
		color: #000000;
		line-height: 34px;
		width: 80px;
		text-align: right;
	}

	.line {
		display: flex;
		/* margin-top: 19px; */
		justify-content: center;

	}

	.modal-header.tit {
		font-size: 20px;
		color: #000;
		font-weight: normal;
	}

	.w600 {
		margin: calc(50vh - 165px) auto;
	}

	.tcent {
		text-align: center;
	}

	input[type='checkbox'] {
		opacity: 0;
		position: absolute;
		z-index: -2;
	}

	input[type="checkbox"]+label {
		width: 16px;
		height: 16px;
		border: 1px solid #c8c8c8;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 0;
		box-sizing: border-box;
		margin-right: 7px;
	}

	input[type="checkbox"]+label::before {
		content: '';
		display: block;
		margin-bottom: 0;
		box-sizing: border-box;
	}

	input[type="checkbox"]:checked+label {
		border: 1px solid #0075ff;
		box-sizing: border-box;
		background: #0075ff url(../../assets/images/dui.png) no-repeat;
		background-size: 80% 80%;
		background-position-x: 20%;
		background-position-y: 20%;
	}

	input[type="checkbox"]:checked+label::before {
		background: #0075ff;
	}


	.search_inp {
		width: 255px;
		margin-bottom: 0;
	}

	.title {
		font-size: 24px;
		color: #000000;
	}



	.btns {
		width: 72px;
		padding: 0;
	}

	.zzc {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 4;
		top: 0;
		left: 0;
	}

	.w600 .modal-body.h100,
	.w700 .modal-body.h100 {
		overflow: visible;
		height: calc(100vh - 221px);
	}

	.loading-content {
		position: absolute;
		z-index: 199;
		/* background-color: rgba(0, 0, 0, 0.8); */
		margin: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transition: opacity 0.3s;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		/* width: 200px;
		height: 150px;
		border-radius: 10px; */
	}

	.loading-spinner {
		text-align: center;
	}

	.loading-spinner .circular {
		height: 42px;
		animation: loading-rotate 2s linear infinite;
	}

	.loading-spinner .path {
		animation: loading-dash 1.5s ease-in-out infinite;
		stroke-dasharray: 90, 150;
		stroke-dashoffset: 0;
		/* stroke- 2; */
		stroke: #000;
		stroke-linecap: round;
	}

	.loading-text {
		font-size: 14px;
		color: #000;
	}

	@keyframes loading-rotate {
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}

		50% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -40px;
		}

		to {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -120px;
		}
	}

	.biaoq {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.qx:hover {
		background: #edf3fd;
		color: #4286f5;
	}


	.down {
		background: #fff;
		position: absolute;
		top: 30px;
		right: 0;
		width: 130px;
		text-align: left;
		padding: 0 5px;
		z-index: 5;

		color: #666;
		box-shadow: 0 0 10px rgb(0 0 0 / 20%);

	}

	.li {
		border-bottom: 1px solid #f3f3f3;
		padding-left: 20px;
		height: 40px;
		line-height: 40px;
	}

	.li:nth-last-of-type(1) {
		border-bottom: none;
	}

	.more {
		position: relative;
	}

	.btns .iconfont {
		font-size: 10px;
		transition: all .3s;
		transform: rotateZ(0deg);
		line-height: 26px;
	}

	.actives {
		background: #4286f5;
		color: #fff;
	}

	td,
	th {
		font-size: 14px;
		color: #333;
		/* line-height: 22px; */
		padding: 10px;
		border-top: 0;
		border-bottom: 1px solid #eee;
	}

	.modal {
		position: absolute;
	}

	.modal-dialog {
		height: 97%;
	}

	.modal-header {
		position: sticky;
		top: 0;
		z-index: 50;
	}

	.modal-content {
		/* width: 85%; */
		margin: 0 auto;
		max-height: 100%;
		/* height: 65vh; */
		/* overflow-y: scroll; */
	}

	.cent {
		width: 100%;
		align-items: center;
	}
</style>
